<template>
	<view class="nav">
		<view :class="clickTitle==0?'active':''" @click="getAll">全部</view>
		<view :class="clickTitle==1?'active':''" @click="getFinish">已抄</view>
		<view :class="clickTitle==2?'active':''" @click="getUnfinish">未抄</view>
	</view>
	<view class="search">
		<input type="text" v-model="searchData" placeholder="请输入水表号/单位名称/地址"/>
		<view class="t-icon t-icon-sousuo icon" @click="searchFn(searchData,showData)"></view>
	</view>
	<view >
		<view class="cont" v-for="item in showData" @click="jump(item.id,item.chaobiaoState)">
			<view >
				<view>水表号</view>
				<text>{{item.id}}</text>
			</view>
			<view>
				<view>单位名称</view>
				<text>{{item.danwei}}</text>
			</view>
			<view >
				<view>地址</view>
				<text>{{item.dizhi}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {ref,computed,reactive,toRefs,onBeforeMount,onMounted,onUpdated,getCurrentInstance} from 'vue'
	import {mapState,useStore} from 'vuex'
	export default{
		setup(){
			const {state,getters,commit,dispatch}=useStore();
			const {proxy}=getCurrentInstance();
			let data=reactive({
				num:1,
				searchData:'',
				time:'111',
				allArray:[],
				finishArry:[],
				unfinishArry:[],
				showData:[],
				clickTitle:0,//0，1，2，分别表示标题上面哪个被点击了
				a:computed(()=>state.chaobiao.a),
				b:computed(()=>state.chaobiao.b),
				searchFn:(v,arry)=>{
					data.showData=proxy.$search(v,arry);
					data.searchData='';
				},
				changeMonth:(v)=>{
					return v<10?'0'+v:v;
				},
				getTime:()=>{
					let date=new Date();
					let year=date.getFullYear();
					let month=data.changeMonth(date.getMonth()+1);
					data.time=year+'-'+month;
					
				},
				getData:(v)=>{
					proxy.$http({
						url:'/miniwatermeter/getchaobiao',
						method:'get',
						data:{
							time: v+'%',
						}
					}).then((res)=>{
						// console.log(res);
						let all=[...res.data.data];
						let finish=[...res.data.data1];
						let unfinish=[];
						
						finish.forEach((item)=>{
							item.id=item.sb_num;
							item.danwei=item.qy_name;
							item.dizhi=item.qy_dazhi;
						});
						
						all.forEach((item,index)=>{
							item.id=item.sb_num;
							item.danwei=item.qy_name;
							item.dizhi=item.qy_dazhi;
							item.chabiaoState='未抄';
							finish.forEach(i=>{
								if(item.sb_num==i.sb_num){
									item.chabiaoState='已抄';
									// break;？？？加上会报错
								}
								
							})
							if(item.chabiaoState=="未抄"){
								unfinish.push(item);
							}
						});
						data.allArray=[...all];
						data.finishArry=[...finish];
						data.unfinishArry=[...unfinish];
						data.showData=[...data.allArray];
					})
				},
				getAll:()=>{
					data.showData=[...data.allArray];
					data.clickTitle=0;
				},
				getFinish:()=>{
					data.showData=[...data.finishArry];
					data.clickTitle=1;
				},
				getUnfinish:()=>{
					data.showData=[...data.unfinishArry];
					data.clickTitle=2;
				},
				jump:(id,state)=>{
					//将对应项的数据存储再store里面，再根据state跳转页面。
					//跳转页面后，在页面加载时，获取store里面的数据，渲染在页面上。
					let arry=[...data.showData];
					arry.forEach((item)=>{
						if(item.id==id){
							console.log(item.id);
							commit('chaobiao/setInfo',item);
							if(item.chabiaoState=='未抄'){
								uni.navigateTo({
									url:"../meterRead/meterRead"
								});
								data.num++
								return
							};
							uni.navigateTo({
								url:"../finishMeter/finishMeter"
							});
							data.num++
						}
					})
				}
			
			});
			onMounted(()=>{
				data.getTime();
				commit('chaobiao/setTime',data.time);
				data.getData(data.time);
			});
			return  {...toRefs(data)  };
		},
		onShow() {
			this.getAll();
			if(this.num!=1){
				//除开第一次展示页面，后面每次进入都重新渲染一次页面数据
				this.getData(this.time);
			}
		}
	}
</script>

<style lang="scss">
@import url("../../static/chaobiao/iconfont-weapp/iconfont-weapp-icon.css");
page{
	color: #666666;
}
.nav{
	display: flex;
	padding: 20rpx 0;
	// border: 1px solid red;
}
.nav>view{
	width: 250rpx;
	text-align: center;
	padding-bottom: 10rpx;
}
.active{
	color: #0079FE;
	border-bottom: 2px solid #0079FE;
}

.search{
	width: 720rpx;
	margin: 0 auto;
	padding: 20rpx;
	border: 2px solid #E4E4E4;
	border-radius: 30rpx;
	box-sizing: border-box;
	display: flex;
	input{
		flex: 1;
	}
}

.icon{
	width: 50rpx;
	height: 50rpx;
	margin-left:40rpx;
}

.cont{
	border-top: 2px solid #E4E4E4;
	border-bottom: 2px solid #E4E4E4;
	padding: 20rpx 35rpx;
}
.cont>view{
	display: flex;
	margin: 10rpx 0;
}
.cont>view>view{
	width: 200rpx;
	font-weight: 600;
}
</style>
